<template>
  <div id="body">
    <div id="saizhi"> 
      <div class="htitle">
        <strong>球队库</strong>
        
      </div>
    </div>


    <div style="margin: 10px 0 0 0;width: 1000px;background-color: white;">
      <el-select v-model="leagueId" clearable placeholder="联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague()">
        <el-option v-for="item in leagueoptions" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
      </el-select>


      <el-input style="width: 200px;margin-right: 10px;" placeholder="球队名称" suffix-icon="el-icon-search" clearable v-model="teamName"></el-input>

      <el-button class="ml-5" icon="el-icon-search" circle @click="sereachteam">查询球队</el-button>
      <el-button icon="el-icon-remove" circle @click="reset">重置查询</el-button>
    </div>

    <div class="data" id="MainDiv" style="display: block;background-color: white;">
			<ul id="div_Table1" class="team-info" >
			<li v-for="item in teamoptions" :key="item.id" :label="item.teamName" :value="item.id">
			<img style="cursor:pointer;" :src="item.teamImg" width="100px" @click="TeamDetail(item.id)">
			<div>
        <a class="testA" @click="TeamDetail(item.id)">{{item.teamName}}
        </a>
			</div>
			</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:'Team',
  data(){
    return{
      leagueId:"",
      teamName:"",
      leagueoptions:[],
      teamoptions:[]
    }
  },
  created(){
    this.load()
    this.sereachteam()
  },

  methods:{
    load(){
      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.leagueoptions = res.data
      })
    },
    //查询球队
    sereachteam(){
      this.request.get("/team/front/getteambyleagueId",{
        params:{
          leagueId:this.leagueId,
          teamName:this.teamName
        }
      }).then(res=>{
        console.log(res.data)
        this.teamoptions=res.data
      })
    },
    reset(){
      this.leagueId="",
      this.teamName="",
      this.sereachteam()
    },
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    }
  }
}
</script>

<style>
#saizhi{
  border: 1px solid #e5e5e5;
    margin-top: 8px;
    clear: both;
}
.htitle{
  line-height: 35px;
    text-align: center;
    font-size: 14px;
    background-color: #f0f0f0;
    position: relative;
}
.data {
    float: left;
    width: 100%;
}
.team-info {
    border: 1px solid #e5e5e5;
}
ul {
    margin: 0;
    padding: 0;
}
.team-info li {
    display: inline-block;
    text-align: center;
    padding: 32px;
}

.testA:hover{
  color: #005eb8;
  cursor: pointer;
}
</style>